<template>
    <div v-loading="loading">
        <el-card>
            <template #header> 添加菜单 </template>
            <el-form :model="form" :rules="rules">
                <el-form-item v-show="$route.query.id" label="上级菜单（pid）">
                    <el-input v-model="form.pid"></el-input>
                </el-form-item>
                <el-form-item label="路由名称" prop="routename">
                    <el-input v-model="form.routename"></el-input>
                </el-form-item>
                <el-form-item label="路由路径" prop="routepath">
                    <el-input v-model="form.routepath"></el-input>
                </el-form-item>
                <el-form-item label="组件路径" prop="component">
                    <el-input v-model="form.component"></el-input>
                </el-form-item>
                <el-form-item label="显示">
                    <el-switch v-model="form.status"></el-switch>
                </el-form-item>
                <el-form-item label="所属组（权限）">
                    <el-input v-model="form.group"></el-input>
                </el-form-item>
                <el-form-item label="菜单名称" prop="menuname">
                    <el-input v-model="form.menuname"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标">
                    <el-input v-model="form.menuicon"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addMenus">保存</el-button>
                    <el-button @click="$router.push({ name: 'MenusIndex' })">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
  
<script>
import { addMenus, exist } from "@/api/menus";
export default {
    data() {
        return {
            loading: false,
            show: false,
            form: {
                pid: this.$route.query.id,
                status: false,
            },
            rules: {
                menuname: [
                    { required: true, message: "不能为空" },
                    // {
                    //     validator: (rule, value, cb) => {
                    //         if (/^.{1,18}$/.test(value)) {
                    //             cb();
                    //         } else {
                    //             cb(new Error("必须1-18个字符"));
                    //         }
                    //     },
                    // },
                    // {
                    //     validator: async (rule, value, cb) => {
                    //         const { data } = await exist({
                    //             field: "menuname",
                    //             value,
                    //         });
                    //         if (data) {
                    //             cb(new Error("重复"));
                    //         } else {
                    //             cb();
                    //         }
                    //     },
                    //     trigger: "blur",
                    // },
                ],
                routename: [
                    { required: true, message: "不能为空" },
                    // {
                    //     validator: (rule, value, cb) => {
                    //         if (/^.{1,18}$/.test(value)) {
                    //             cb();
                    //         } else {
                    //             cb(new Error("必须1-18个字符"));
                    //         }
                    //     },
                    // },
                    // {
                    //     validator: async (rule, value, cb) => {
                    //         const { data } = await exist({
                    //             field: "routename",
                    //             value,
                    //         });
                    //         if (data) {
                    //             cb(new Error("重复"));
                    //         } else {
                    //             cb();
                    //         }
                    //     },
                    //     trigger: "blur",
                    // },
                ],
                routepath: [
                    { required: true, message: "不能为空" },
                    // {
                    //     validator: (rule, value, cb) => {
                    //         if (/^.{1,18}$/.test(value)) {
                    //             cb();
                    //         } else {
                    //             cb(new Error("必须1-18个字符"));
                    //         }
                    //     },
                    // },
                ],
                component: [
                    { required: true, message: "不能为空" },
                    // {
                    //     validator: (rule, value, cb) => {
                    //         if (/^.{1,18}$/.test(value)) {
                    //             cb();
                    //         } else {
                    //             cb(new Error("必须1-18个字符"));
                    //         }
                    //     },
                    // },
                ]
            },
        };
    },
    methods: {
        async addMenus() {
            this.loading = true
            try {
                await addMenus(this.form);
                this.$message.success("添加成功");
                this.$router.push({ name: 'MenusIndex' })
                localStorage.removeItem("menus");
            } catch (error) { }
            this.loading = false
        },
    },
};
</script>
  